<template>
  <div class="food-view">
    <header class="header">
      <img src="LOGO.png" alt="School Logo" class="logo" />
      <h5 class="school-name">中国计量大学 - 嘉兴特色名小吃</h5>
    </header>
    <main class="content">
      <h1 class="main-title">嘉兴特色美食</h1> <!-- 新增的标题 -->
      <section class="card-section">
        <!-- 嘉兴粽子 -->
        <router-link to="/food/zongzi" class="food-card" @mouseover="hoveredCard = 1" @mouseleave="hoveredCard = 0">
          <img src="zongzi.png" alt="嘉兴粽子" class="card-image left"/>
          <div class="card-text">
            <h1 v-if="hoveredCard !== 1">嘉兴粽子</h1>
            <h3 v-else>嘉兴粽子</h3>
            <p v-if="hoveredCard !== 1">嘉兴以粽子闻名，尤其是肉粽，以其独特的糯米香气和丰富的馅料受到全国人民的喜爱。</p>
            <p v-else>嘉兴以粽子闻名，尤其是肉粽，以其独特的糯米香气和丰富的馅料受到全国人民的喜爱。</p>
          </div>
        </router-link>

        <!-- 南湖菱 -->
        <router-link to="/food/nanhuling" class="food-card" @mouseover="hoveredCard = 2" @mouseleave="hoveredCard = 0">
          <div class="card-text">
            <h1 v-if="hoveredCard !== 2">南湖菱</h1>
            <h3 v-else>南湖菱</h3>
            <p v-if="hoveredCard !== 2">嘉兴南湖特产，香甜可口，是地道的水乡风味。</p>
            <p v-else>嘉兴南湖特产，香甜可口，是地道的水乡风味。</p>
          </div>
          <img src="nanhuling.jpeg" alt="南湖菱" class="card-image right"/>
        </router-link>

        <!-- 文虎酱鸭 -->
        <router-link to="/food/wenhujiangya" class="food-card" @mouseover="hoveredCard = 3" @mouseleave="hoveredCard = 0">
          <img src="wenhujiangya.jpeg" alt="文虎酱鸭" class="card-image left"/>
          <div class="card-text">
            <h1 v-if="hoveredCard !== 3">文虎酱鸭</h1>
            <h3 v-else>文虎酱鸭</h3>
            <p v-if="hoveredCard !== 3">酱香浓郁，鸭肉鲜嫩，是嘉兴人喜爱的传统美食。</p>
            <p v-else>酱香浓郁，鸭肉鲜嫩，是嘉兴人喜爱的传统美食。</p>
          </div>
        </router-link>

        <!-- 鲜肉烧麦 -->
        <router-link to="/food/shaomai" class="food-card" @mouseover="hoveredCard = 4" @mouseleave="hoveredCard = 0">
          <div class="card-text">
            <h1 v-if="hoveredCard !== 4">鲜肉烧麦</h1>
            <h3 v-else>鲜肉烧麦</h3>
            <p v-if="hoveredCard !== 4">嘉兴传统小吃，外酥里嫩，以茶叶熏制而成，香味独特。</p>
            <p v-else>嘉兴传统小吃，外酥里嫩，以茶叶熏制而成，香味独特。</p>
          </div>
          <img src="xianroushaomai.jpeg" alt="鲜肉烧麦" class="card-image right"/>
        </router-link>
      </section>
      <router-link to="/HomePage" class="back-button">返回</router-link> <!-- 新增的返回按钮 -->
    </main>
    <footer class="footer">
      <p>版权所有 © 姓名: 陶诗莹, 学号: 2300303105, 电话: 15024340028, 邮箱: 2351922591@qq.com</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: "ZongziView",
  data() {
    return {
      flippedCards: {
        sweet: false,
        salty: false,
        special: false,
      },
    };
  },
  mounted() {
    // 页面加载完成后滚动到顶部
    window.scrollTo(0, 0);
  },
  methods: {
    toggleCard(type) {
      this.$set(this.flippedCards, type, !this.flippedCards[type]);
    },
  },
};
</script>

<style scoped>
.food-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f8f8f8;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.logo {
  width: 50px;
  height: auto;
  margin-right: 0.5em;
}

.school-name {
  margin: 0;
  color: #333;
}

.content {
  flex: 1;
  padding-top: 6em;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐 */
}

.main-title {
  font-size: 3em; /* 新增标题字体大小 */
  color: #333;
  margin: 0.5em 0.5em; /* 上下间距 */
  text-align: center; /* 居中对齐 */
}

.card-section {
  display: flex;
  flex-direction: column;
  gap: 0; /* 去掉间隙 */
  width: 100%; /* 占满全宽 */
}

.food-card {
  display: flex;
  align-items: center;
  padding: 1em;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0; /* 卡片之间的分隔线 */
  text-decoration: none; /* 去掉下划线 */
}

.card-image {
  width: 400px; /* 默认宽度 */
  height: 600px; /* 默认高度 */
  border-radius: 10px;
  object-fit: cover; /* 保持图像的比例 */
  transition: all 0.3s ease; /* 动画效果 */
}

.food-card:hover .card-image {
  width: 1000px; /* 鼠标悬停时的宽度 */
  height: 600px; /* 鼠标悬停时的高度 */
}

.card-image.left {
  margin-right: 1em; /* 右侧间距 */
}

.card-image.right {
  margin-left: 1em; /* 左侧间距 */
  margin-right: 0; /* 去掉右侧间距 */
}

.card-text {
  flex: 1; /* 填充剩余空间 */
  text-align: center; /* 居中对齐 */
}

.card-text h1 {
  font-size: 2.5em; /* H1字体大小调整为2.5em */
  color: #333;
  margin: 0.5em 0;
  transition: font-size 0.3s ease; /* 添加过渡效果 */
}

.card-text h3 {
  font-size: 1.5em; /* H3字体大小 */
  color: #333;
  margin: 0.5em 0;
  transition: font-size 0.3s ease; /* 添加过渡效果 */
}

.card-text p {
  font-size: 1.1em; /* 段落字体大小 */
  color: #666;
}

.back-button {
  margin: 2em 0; /* 上下间距 */
  padding: 1em 2em; /* 内边距 */
  background-color: #007bff; /* 按钮背景色 */
  color: #fff; /* 按钮文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  border-radius: 5px; /* 圆角 */
}

.back-button:hover {
  background-color: #0056b3; /* 悬停时的背景色 */
}

.footer {
  text-align: center;
  padding: 1em;
  background-color: #f0f0f0;
  color: #666;
  font-size: 0.85em;
}
</style>
